<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->
    <a-form ref="formRef" :model="formState" layout="vertical" :rules="CONFIG_EDIT.RULES">
      <a-row :gutter="12">
        <a-col :span="12">
          <a-form-item label="配置代码" field="code">
            <a-input v-model.trim="formState.code" allow-clear placeholder="请填写配置代码" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="配置名称" field="title">
            <a-input v-model="formState.title" allow-clear placeholder="请填写配置名称"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="配置状态" field="state">
            <smart-dict v-model="formState.state" :url="DictOptions.ConfigState" is-radio/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :label="`显示排序值 [ ${formState.sort} ]` " field="sort"
                       tooltip="升序排序 显示值越小 显示越靠前">
            <a-slider v-model="formState.sort"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="配置描述" field="description">
            <a-textarea v-model="formState.description" placeholder="请填写配置描述" allow-clear
                        :auto-size="{ minRows: 2, maxRows: 5 }"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="配置明细" field="items">
            <div class="form-item-custom">
              <div class="btn-container">
                <a-button size="small" type="primary" @click="itemCtr.open()"> 新增配置项</a-button>
              </div>
              <div class="main-container">
                <a-list  :bordered="false" >


                    <a-list-item v-for=" (item ,index ) in formState.items" :key="index">
                      <template #actions>
                        <a-typography>
                          <a-typography-paragraph copyable type="danger" > {{item.value}} </a-typography-paragraph>
                          <div class="buttons">
                            <a-space>
                              <a-link v-if="item?.allowEdit" @click="itemCtr.open(item)" v-text="'修改'"/>
                              <a-link v-if="item?.allowDel" status="danger" @click="itemCtr.remove(index)" v-text="'删除'"/>
                            </a-space>
                          </div>
                        </a-typography>
                      </template>
                      <a-list-item-meta :description="item.description" :title="`${item.name}[ ${item.code} ]`"/>
                    </a-list-item>

                </a-list>
              </div>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <item-modal v-if="itemCtr.show" :record="itemCtr.record" @close="itemCtr.close"/>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>
import {reactive} from 'vue'
import {EditDrawer} from '@/libs/core'
import {DictOptions} from '@/libs/options'
import {CONFIG_EDIT} from "../resource/form";
import {SystemHttp} from '../resource/http'

import {EmptyUtil, MsgUtil} from "@/utils";
import ItemModal from "./item_modal.vue";

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])

const {addConfig, updateConfig} = SystemHttp
const config = {tplRecord: CONFIG_EDIT.BODY, rawRecord: props.record, rowKey: 'id', emit}

const service = new EditDrawer(config).setAddRequest(addConfig).setUpdateRequest(updateConfig)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改配置' : '新建配置'

const itemCtr = reactive({
  show: false,
  record: {},
  isAdd: true,
  open: (obj = {}) => {
    itemCtr.record = obj
    itemCtr.isAdd = EmptyUtil.isEmptyObject(obj)
    itemCtr.show = true
  },
  close: data => {

    if (EmptyUtil.isNotEmptyObject(data)) {
      const index = formState.value.items.findIndex(item => item.code === data.code)
      if (itemCtr.isAdd) {
        console.log("新增模式")
        if (index >= 0) {
          MsgUtil.notify("添加失败", "已存在相同的选项值", 'error')
          return
        }
        service.formState.value.items.push(data)

      } else {
        service.formState.value.items[index] = data

      }

    }
    itemCtr.record = {}
    itemCtr.show = false
  },
  remove: index => formState.value.items.splice(index, 1)
})


</script>

<style scoped lang="less">
:deep(.arco-list-item-action) {
  margin-left: 24px;
}


.buttons {
  width: 100%;
  text-align: right;
}
</style>